23.08.14

오늘 한 일

PlaceItem을 잡고 드래그하고 떼면 onClick 이벤트가 발생한다.

react-modal-sheet이라는 라이브러리를 사용하고 있는데 내부적으로 framer-motion을 사용하고 있다.

onDragEnd를 사용하려고 했는데 동작하지 않았다.. 🙃

이리저리 시도해보았지만 오늘은 잘 안돼서 내일 다시 해봐야겠다...🥲

다른 바텀시트 라이브러리를 찾아보았다. react-spring-bottom-sheet라는 라이브러리도 있어서 테스트해보았다. 근데 이 라이브러리는 업데이트를 안하는 것 같다...

그러다 MUI의 swipeableDrawer를 발견했다. 바텀시트라는 용어 말고도 Drawer라는 용어로도 쓰인다는 것을 알았다. 자세히 말하면 Drawer는 조금 더 범용성 있는 컴포넌트인 것 같다.

vaul이라는 라이브러리도 찾았다(@radix-ui/react-dialog 사용해서 만든 라이브러리). vercel 다니는 사람이 만든 라이브러리인데, 만든지 3주 밖에 안됐는데 벌써 2.4k 스타를 받았다. 차라리 이걸 쓰고 커스텀을 하는 것도 나쁘지 않아보였다.

물론 framer-motion 만으로도 구현할 수 있겠지만 최적화도 필요한 부분이라 시간이 오래 걸릴 것 같아 라이브러리의 도움을 받아 구현하면 좋을 것 같다.